import React from 'react'
import LoginCss from './index.module.scss'
import { Link } from 'react-router-dom'
// import creatHistory from 'history/createBrowserHistory'
import back from '../../js/goBack'

class Login extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            noSecret: true, //免密登录
            phoneLegal: false, //手机号合法
            phone: "", //
            pwd: "", // 
            code: "", //
            second:16, //
            userList:[]
        }
    }
    render() {
        return (
            <div className={LoginCss.main}>
                <div className={LoginCss.content}>
                    <div className={LoginCss.logo}>
                        <img src="https://login.m.vsigo.cn/static/img/logoNew.png" alt="" />
                    </div>
                    <p className={LoginCss.title}>{this.state.noSecret ? "免密登录" : "密码登录"}</p>
                    <div className={LoginCss.inputBox}>
                        <div className={LoginCss.phone}>
                            <i className="iconfont icon-icon_phone"></i>
                            <input onChange={e => this.inputValChange(e, "PHONE")} value={this.state.phone} maxLength="11" type="number" placeholder="请输入手机号" />
                            {
                                this.state.phone !== "" ? <i onClick={this.empty.bind(this, "PHONE")} className="iconfont icon-btn_scx deleteIcon"></i> : ''
                            }
                        </div>
                        <div className={LoginCss.pwd}>
                            <i className="iconfont icon-icon_yzm"></i>
                            {
                                this.state.noSecret ? (
                                    <input onChange={e => this.inputValChange(e, "CODE")} value={this.state.code} maxLength="6" type="number" placeholder="请输入验证码" />
                                ) : (
                                        <input onChange={e => this.inputValChange(e, "PWD")} value={this.state.pwd} maxLength="18" type="text" placeholder="请输入密码" />
                                    )
                            }
                            {
                                this.state.code !== "" || this.state.pwd !== "" ? <i onClick={this.empty.bind(this, "PWDCODE")} className="iconfont icon-btn_scx deleteIcon"></i> : ''
                            }
                            {
                                this.state.noSecret ? (
                                <p onClick={this.btnOper.bind(this, { type: "GETCODE" })} className={this.state.phoneLegal ? LoginCss.getCode : LoginCss.noCode}>{this.state.second<16 && this.state.second>=0?this.state.second:"获取验证码"}</p>
                                ) : (
                                        <p className={LoginCss.forget}>忘记密码</p>
                                    )
                            }
                        </div>
                    </div>
                    {
                        this.state.noSecret ? (
                            <p className={LoginCss.treaty}> 温馨提示：：未注册视客账号的手机号，登录后将自动完成注册，且代表您已经同意
                                <a href="https://m.vsigo.cn/h5/LoginProtocol.html">《用户服务协议》</a></p>
                        ) : (<p className={LoginCss.treaty}></p>)
                    }

                    <p onClick={this.btnOper.bind(this, { type: "LOGIN" })} className={LoginCss.btn + " " + LoginCss.btnLog}>登录</p>
                    <p onClick={this.btnOper.bind(this, { type: "CHANGE" })} className={LoginCss.btn + " " + LoginCss.btnChange}>{this.state.noSecret ? "使用密码登录" : "免密登录"}</p>

                    {
                        this.state.noSecret ? (
                            <div className={LoginCss.other}>
                                <Link to="/login">
                                    <img src="https://login.m.vsigo.cn/static/img/qqIcon.png" alt="" />
                                </Link>
                                <Link to="/login">
                                    <img src="https://login.m.vsigo.cn/static/img/weiboIcon.png" alt="" />
                                </Link>
                            </div>) : ''
                    }

                </div>

            </div>
        )
    }
    // input框数据清除
    empty = (e) => {
        switch (e) {
            case "PHONE":
                this.setState({
                    phone: "",
                    phoneLegal:false
                })
                break;
            case "PWDCODE":
                this.setState({
                    pwd: "",
                    code: ""
                })
                break;

            default:
                break;
        }
    }
    //  点击事件
    btnOper = (e) => {
        switch (e.type) {
            case "LOGIN":
                if(this.state.phoneLegal){
                    // console.log(this.state.phone.substr(5))
                    let user = {
                        name:"",
                        id:this.state.phone,
                        pwd:this.state.phone.substr(5),
                        phone:this.state.phone
                    }
                    
                    if(this.state.pwd !== "" || this.state.code !== ""){
                        // console.log(this.state.userList)
                        let flag = true;
                        this.state.userList.forEach((item)=>{
                            if(item.id === user.id){
                                flag =false;
                                if(item.pwd === user.pwd || this.state.code === "060374"){
                                    localStorage.setItem("thisUser",JSON.stringify(user))
                                   
                                    back();
                                }
                            }
                        })
                        if(flag){
                            // console.log(3)
                            this.state.userList.push(user)
                            localStorage.setItem("thisUser",JSON.stringify(user))
                            localStorage.setItem("userList",JSON.stringify(this.state.userList))
                            back();
                            
                        }
                        localStorage.setItem("token","ahdfjhkjfladgds354564")
                        if(localStorage.getItem("pathName")){

                        }

                    }else{

                    }
                }
                break;
            case "CHANGE":
                this.setState({
                    noSecret: !this.state.noSecret,
                    phoneLegal: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(this.state.phone),
                    // phone: "",
                    pwd: "",
                    code: ""
                })
                break;
            case "GETCODE":
                if (this.state.phoneLegal) {
                    console.log("验证码已发送")
                    this.auto=setInterval(() => {
                        
                        this.setState({
                            second:this.state.second - 1
                        })
                        if(this.state.second <0){
                            clearInterval(this.auto)
                            this.setState({
                                second:16
                            })
                        }

                    }, 1000);
                }
                break;
            default:
                break;
        }
    }
    // input框数据双向绑定
    inputValChange = (e, params) => {
        // console.log(e, params)

        switch (params) {
            case "PHONE":
                // console.log("手机号" + e.target.value)
                if(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(e.target.value)){
                    this.setState({
                        phone: e.target.value,
                        phoneLegal: true
                    })
                }else{
                    this.setState({
                        phone: e.target.value,
                        phoneLegal: false
                    })
                }
                   
               
                break;
            case "CODE":
                // console.log("验证码" + e.target.value)
                this.setState({
                    code: e.target.value
                })
                break;
            case "PWD":
                // console.log("密码" + e.target.value)
                this.setState({
                    pwd: e.target.value
                })
                break;

            default:
                break;
        }
    }
    componentDidMount = () => {
        let recUserList = JSON.parse(localStorage.getItem("userList"))?JSON.parse(localStorage.getItem("userList")):[]
        this.setState({
            userList:recUserList
        })
    }
    componentWillUnmount=()=>{
        clearInterval(this.auto)
        this.setState = (state, callback) => {
            return;
        }
    }
}
export default Login